import services from '@/services/common'; // 假设新的服务接口已经定义好

import React, { useEffect, useState } from 'react';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';

const { Option } = Select;

const { listMajors } =
  services.CommonController;


export interface CreateFormValueType extends Partial<TeacherAPI.UpdateTeacherParam> {
  cardId?: string;
  mobile?: string;
  name?: string;
  birthday?: string;
  gender?: number;
  major?: string;
  comment?: string;
}

export interface FormProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: CreateFormValueType) => Promise<void>;
}

const App: React.FC<FormProps> = (props) => {

  const [form] = Form.useForm();

  const [majors, setMajors] = useState<CommonAPI.SimpleVL[]>([]);

  useEffect(() => {
    const fetchMajors = async () => {
      try {
        const response = await listMajors();
        const majorList = response.data.result;
        if (majorList) {
          const simpleVL = majorList.map(major => ({
            value: major.majorId,
            label: major.majorName,
          }));
          console.log(simpleVL);
          setMajors(simpleVL);
        }
      } catch (error) {
        console.error('Failed to fetch majors:', error);
      }
    };

    fetchMajors();
  }, []);



  return (
    <>
      <Drawer
        title="新建教师账号"
        width={420}
        onClose={() => props.onCancel()}
        open={props.visible}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={() => props.onCancel()}>取消</Button>
            <Button onClick={() => props.onSubmit(form.getFieldsValue())} type="primary">
              提交
            </Button>
          </Space>
        }
      >
        <Form
          layout="vertical"
          form={form}
        >
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="cardId"
                label="会员卡号"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="name"
                label="姓名"
                rules={[{ required: true, message: '请输入姓名' }]}
              >
                <Input placeholder="请输入姓名" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="gender"
                label="性别"
                rules={[{ required: true, message: '请输入性别' }]}
              >
                <Select placeholder="请输入性别">
                  <Option value="0">男</Option>
                  <Option value="1">女</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="birthday"
                label="出生日期"
                rules={[{ required: true, message: '请输入出生日期' }]}
              >
                <DatePicker
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="mobile"
                label="手机号"
                rules={[{ required: true, message: '请输入手机号' }]}
              >
                <Input placeholder="请输入手机号" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="major"
                label="专业"
                rules={[{ required: true, message: '请输入专业' }]}
              >
                <Select
                  labelInValue
                  mode="multiple"
                  style={{ width: '100%' }}
                  options={majors}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="comment"
                label="备注"
              >
                <Input.TextArea rows={4} placeholder="请输入备注" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};

export default App;